<template>
  <div class="user">
    <template v-if="$route.meta.isShow">
      <template
      v-if="!userInfo || !serveMenus"
    >
      <div class="loading">
        <svg
          t="1616053408617"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="17643"
          width="64"
          height="64"
        >
          <path
            d="M739.487 798.497v-78.751c0-86.667-49.501-164.599-124.671-202.725 75.171-38.137 124.671-116.076 124.671-202.735v-78.747c34.78-1.811 62.499-30.658 62.499-65.863 0-36.359-29.582-65.941-65.972-65.941H287.953c-36.358 0-65.941 29.581-65.941 65.941 0 35.217 27.738 64.072 62.505 65.866v78.743c0 86.661 49.495 164.592 124.666 202.735-75.171 38.127-124.666 116.059-124.666 202.726v78.748c-34.768 1.793-62.505 30.646-62.505 65.868 0 36.368 29.582 65.95 65.941 65.95h448.061c36.39 0 65.972-29.581 65.972-65.95 0-35.21-27.719-64.054-62.499-65.865zM256.513 169.678c0-17.337 14.117-31.44 31.44-31.44h448.061c17.353 0 31.472 14.102 31.472 31.44 0 17.332-14.119 31.45-31.472 31.45H287.953c-17.322-0.001-31.44-14.118-31.44-31.45z m62.504 550.068c0-86.86 58.626-163.385 142.559-186.056a17.26 17.26 0 0 0 12.734-16.661c0-7.785-5.22-14.626-12.734-16.646-83.933-22.709-142.559-99.227-142.559-186.094v-78.655H704.98v78.655c0 86.867-58.626 163.385-142.559 186.094-7.515 2.021-12.735 8.862-12.735 16.646a17.262 17.262 0 0 0 12.735 16.661c83.933 22.673 142.559 99.196 142.559 186.056v78.659H670c-8.233-28.4-34.42-49.172-65.478-49.172h-75.286V474.897c80.982-8.637 144.278-77.368 144.278-160.603v-17.381H350.466v17.381c0 83.232 63.29 151.961 144.262 160.602v274.337H419.45c-31.053 0-57.241 20.771-65.473 49.172h-34.964v-78.659z m416.998 176.066H287.954c-17.322 0-31.44-14.117-31.44-31.455 0-17.332 14.117-31.45 31.44-31.45h448.061c17.353 0 31.472 14.119 31.472 31.45 0 17.337-14.119 31.455-31.472 31.455z"
            p-id="17644"
            fill="#1296db"
          ></path>
        </svg>
        <span class="loading_text">加载中...</span>
      </div>
    </template>
      <template v-else>
      <div class="user_info" v-if="userInfo">
        <div class="info_personage">
          <van-image :src="userInfo.avatar"></van-image>
          <div class="personage_info">
            <span>{{ userInfo.nickname }}</span>
            <span @click="ToUserData">
              ID:{{ userInfo.uid }}
              <van-icon name="edit" size="0.35rem" />
            </span>
          </div>
        </div>
        <div class="info_change" @click="ToUserData">
          <svg
            t="1615604505750"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6356"
            width="20"
            height="20"
          >
            <path
              d="M512 343.438c-101.49 0-179.086 77.597-179.086 179.086S410.51 701.611 512 701.611s179.086-77.597 179.086-179.087S613.49 343.438 512 343.438z m0 298.496a119.751 119.751 0 0 1-119.41-119.41c0-65.65 53.76-119.41 119.41-119.41s119.41 53.76 119.41 119.467A119.751 119.751 0 0 1 512 641.877z"
              p-id="6357"
              fill="#ffffff"
            ></path>
            <path
              d="M628.338 56.889H395.662c-17.465 0-29.127 11.662-29.127 29.127v110.592c-23.267 11.605-46.535 23.268-63.943 34.873l-93.127-58.197a30.663 30.663 0 0 0-40.733 11.662L52.395 388.55c-11.606 17.522-5.803 34.987 11.662 40.79l93.07 58.197v69.973l-93.07 58.14c-17.465 5.86-23.325 23.325-11.662 40.733l116.337 203.72c5.86 11.661 23.325 17.464 40.733 5.859l93.127-58.198c17.408 11.606 40.676 29.07 63.943 34.873V959.09c0 17.465 11.662 29.07 29.127 29.07h232.676c17.465 0 29.127-11.605 29.127-29.07V848.498c23.267-11.662 46.535-23.325 63.943-34.93l93.127 58.197a30.663 30.663 0 0 0 40.733-11.662l116.337-203.662c11.606-17.522 5.803-34.93-11.662-40.79l-93.07-58.14v-69.916l93.07-58.198c11.662-5.802 17.465-23.324 11.662-40.732L855.268 184.889c-5.86-11.662-23.325-17.465-40.733-11.662l-93.184 58.31c-17.408-11.605-40.675-29.07-63.943-34.872V86.016c0-17.465-11.662-29.127-29.127-29.127z m-203.606 58.197h174.536v98.987c0 11.605 5.802 23.267 17.464 29.07a370.916 370.916 0 0 1 81.408 46.592c11.663 5.803 23.325 5.803 34.93 0l87.268-52.395 87.267 151.325-87.267 52.338c-11.662 11.662-17.465 23.324-11.662 34.986 0 17.465 5.86 29.07 5.86 46.535 0 17.465 0 29.128-5.86 46.592 0 11.606 5.86 23.268 11.662 29.07l87.267 52.395-87.267 151.325-87.268-52.338a37.092 37.092 0 0 0-34.93 0 370.916 370.916 0 0 1-81.408 46.535c-11.662 11.662-17.464 23.325-17.464 34.93v98.987H424.732v-98.987a32.028 32.028 0 0 0-17.464-29.127 370.916 370.916 0 0 1-81.408-46.535 37.092 37.092 0 0 0-34.93 0l-87.268 46.535-87.267-151.325 87.267-52.337c11.662-5.86 17.465-17.522 11.662-29.128 0-17.464-5.86-29.127-5.86-46.592 0-17.464 0-29.07 5.86-46.535 5.803-11.662 0-23.324-11.662-29.127l-87.267-52.338L203.662 243.2l87.268 52.338c11.662 5.802 23.324 5.802 34.93 0a370.916 370.916 0 0 1 81.408-46.592 32.028 32.028 0 0 0 17.464-29.07v-104.79z"
              p-id="6358"
              fill="#ffffff"
            ></path>
          </svg>
        </div>
      </div>
      <div class="user_func">
        <ul class="user_wallet">
          <li>
            <span>我的余额</span>
            <span>{{ userInfo_big.now_money }}</span>
          </li>
          <li @click="brokerage">
            <span>当前佣金</span>
            <span>{{ userInfo_big.brokerage_price }}</span>
          </li>
          <li @click="ToCoupon">
            <span>优惠卷</span>
            <span>{{ userInfo_big.couponCount }}</span>
          </li>
        </ul>
        <div class="user_order">
          <div class="order_header">
            <span>我的订单</span>
            <div class="allOrder" @click="ToOrderList('')">
              <span>全部订单</span>
              <van-icon name="arrow" size="0.3rem" />
            </div>
          </div>
          <ul class="order_type">
            <li @click="ToOrderList(0)">
              <van-icon
                name="card"
                :badge="userInfo_big.orderStatusNum.unpaid_count || ''"
              />
              <span>待付款</span>
            </li>
            <li @click="ToOrderList(1)">
              <van-icon
                name="sign"
                :badge="userInfo_big.orderStatusNum.unshipped_count || ''"
              />
              <span>待发货</span>
            </li>
            <li @click="ToOrderList(2)">
              <van-icon
                name="logistics"
                :badge="userInfo_big.orderStatusNum.received_count || ''"
              />
              <span>待收货</span>
            </li>
            <li @click="ToOrderList(3)">
              <van-icon
                name="chat-o"
                :badge="userInfo_big.orderStatusNum.evaluated_count || ''"
              />
              <span>待评价</span>
            </li>
            <li @click="Torefund">
              <van-icon
                name="refund-o"
                :badge="userInfo_big.orderStatusNum.refund_count || ''"
              />
              <span>售后/退款</span>
            </li>
          </ul>
        </div>
        <div class="user_serve">
          <div class="serve_header">
            <span>我的服务</span>
          </div>
          <ul class="serve_list" v-if="serveMenus">
            <li v-for="item in serveMenus.slice(4, 8)" :key="item.id">
              <router-link :to="item.wap_url">
                <div>
                  <van-image :src="item.pic"></van-image>
                  <span>{{ item.name }}</span>
                </div>
                <van-icon name="arrow" color="#aaaaaa" size="0.35rem" />
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      </template>
    </template>
    <router-view v-else></router-view>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      userInfo: null,
      serveMenus: null,
    };
  },
  computed: {
    ...mapState({
      userInfo_big: (state) => state.data.userInfo,
    }),
  },
  methods: {
    ToUserData() {
      this.$router.push("/user/user_data");
    },
    ToOrderList(id) {
      if (typeof id != "number") {
        this.$router.push("/order/list/");
      } else {
        this.$router.push({
          path: "/order/list/",
          query: {
            id,
          },
        });
      }
    },
    Torefund() {
      this.$router.push("/order/refund_list");
    },
    ToCoupon() {
      this.$router.push("/user/user_coupon");
    },
    brokerage() {
      this.$dialog.alert({
        title: "您未获得推广权限",
        message: "您在商城累计消费金额仅差 1.00 元即\n可开通推广权限",
        theme: "round-button",
      });
    },
  },
  created() {
    var path = this.$route.path;
    if (path == "/user") {
      this.axios.get("/api/userinfo").then((response) => {
        this.userInfo = response.data.data;
      });
      this.axios.get("/api/menu/user").then((response) => {
        this.serveMenus = response.data.data.routine_my_menus;
      });
      this.axios.get("/api/user").then((response) => {
        this.$store.state.data.userInfo = response.data.data;
      });
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.axios.get("/api/userinfo").then((response) => {
      this.userInfo = response.data.data;
    });
    if (to.params.flag) {
      this.$toast(to.params.msg);
    }
    next();
  },
};
</script>

<style lang="less">
.user {
  width: 100%;
  .loading {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .loading_text {
      color: #272822;
    }
    @keyframes move {
      0% {
        transform: rotateZ(0deg);
      }

      15% {
        transform: rotateZ(180deg);
      }

      55% {
        transform: rotateZ(180deg);
      }

      70% {
        transform: rotateZ(360deg);
      }

      100% {
        transform: rotateZ(360deg);
      }
    }

    .icon {
      animation: move 4s linear 2s infinite;
    }
  }
  .user_info {
    width: 100%;
    height: 140px;
    background-color: #e93323;
    border-radius: 0 0 40px 40px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    .info_personage {
      display: flex;
      .van-image {
        width: 61px;
        height: 61px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #fff;
        margin-right: 20px;
      }
      .personage_info {
        display: flex;
        height: 61px;
        flex-direction: column;
        justify-content: center;
        span {
          &:nth-child(1) {
            color: white;
            margin-bottom: 3px;
          }
          &:nth-child(2) {
            color: #f6ada7;
            .van-icon-edit {
              vertical-align: -3px;
            }
          }
        }
      }
    }
  }
  .user_func {
    width: 100%;
    height: 100px;
    padding: 0 10px;
    transform: translateY(-50px);
    .user_wallet {
      width: 100%;
      height: 70px;
      border-radius: 8px;
      background-color: #fff;
      display: flex;
      margin-bottom: 10px;

      > li {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &:not(:last-child) {
          position: relative;
          &::after {
            content: "";
            position: absolute;
            width: 1px;
            height: 40px;
            background-color: #f3f3f3;
            right: 0;
          }
        }
        span {
          &:nth-child(1) {
            font-size: 14px;
            color: #aaaaaa;
            margin-bottom: 5px;
          }
        }
      }
    }
    .user_order {
      width: 100%;
      border-radius: 8px;
      background-color: #fff;
      margin-bottom: 10px;
      .order_header {
        width: 100%;
        height: 44px;
        padding: 0 15px;
        border-bottom: 1px solid #f3f3f3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        .allOrder {
          color: #666666;
          .van-icon-arrow {
            vertical-align: -2.5px;
            margin-left: 3px;
          }
        }
      }
      .order_type {
        width: 100%;
        height: 80px;
        display: flex;
        > li {
          flex: 1;
          height: 100%;
          font-size: 13px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .van-icon {
            font-size: 30px;
            color: #f27e74;
            margin-bottom: 5px;
          }
        }
      }
    }
    .user_serve {
      width: 100%;
      border-radius: 8px;
      background-color: #fff;
      .serve_header {
        width: 100%;
        height: 44px;
        padding: 0 15px;
        border-bottom: 1px solid #f3f3f3;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .serve_list {
        width: 100%;
        padding: 0 10px 20px 10px;
        > li {
          width: 100%;
          height: 45px;
          border-bottom: 1px solid #f3f3f3;
          > a {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            > div {
              display: flex;
              line-height: 22px;
              .van-image {
                width: 22px;
                height: 22px;
              }
              > span {
                margin-left: 8px;
                font-size: 14px;
                margin-top: 2px;
              }
            }
          }
        }
      }
    }
  }
}
</style>